<template>
    <div class="tableCommon-wrapper">
        <a-table :columns="columns" :dataSource="data" :loading="loading" @change="handleTableChange" :rowKey="rowKey"
            :bordered="bordered" :scroll="scroll" ellipsis :pagination="pagination" :row-selection="selection"
            :childrenColumnName="childrenColumnName" :customRow="handleClickRow" :rowClassName="rowClassName" size="middle">
            <template slot-scope="text, record, index" :slot="slot" v-for="slot in Object.keys($scopedSlots)">
                <slot :name="slot" v-bind="{ text, record, index }"></slot>
            </template>
        </a-table>
    </div>
</template>

<script>
export default {
    name: 'standardTable',
    props: {
        columns: {
            type: Array,
            required: true
        },
        data: {
            type: Array,
            required: true
        },
        loading: {
            type: Boolean,
            default: false
        },
        bordered: {
            type: Boolean,
            default: true
        },
        pagination: {
            type: Object | Boolean
        },
        selection: {
            type: Object
        },
        scroll: {
            type: Object,
            default: () => {
                x: 400
            }
        },
        rowKey: {
            type: String,
            default: 'id'
        },
        childrenColumnName: {
            type: String,
            default: 'children'
        },
        handleClickRow: {
            type: Function,
            default: null
        },
        rowClassName: {
            type: Function,
            default: (record,index) => {if (index % 2 != 0) return 'stripe'; }
        }
    },
    data() {
        return {};
    },
    methods: {
        handleTableChange(form,filter,sorter) {
            this.$emit('changeTable', {
                form,
                filter,
                sorter
            });
        }
    }
};
</script>
<style lang="scss" scoped>
.tableCommon-wrapper {
    ::v-deep .ant-table-wrapper {
        box-shadow: 0 0 10px #e8e8e8;
    }
}

::v-deep .selected-row {
    background: #e6f7ff;
}
::v-deep .stripe{
    background: #FAFAFA;
}
</style>
